<script lang="ts">
import { defineComponent, ref, reactive, watch, watchEffect, onUnmounted } from "vue"
import { useI18n } from "vue-i18n";
import { UserModule } from "@/store/modules/user";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import { getUserInfo, transfer } from "@/api"
import getTransferList from "@/components/getTransferList.vue";

export default defineComponent({
    components: { getTransferList },
    setup() {
        const { t } = useI18n();
        const pageLoading = ref(true)
        const loading = ref(false)
        const userInfo = ref({})
        const formData = reactive({
            address: "",
            tokenType: "",
            amount: ""
        })
        const sendTransfer = async (): Promise<void> => {
            if (!Number(formData.amount)) return
            showConfirmDialog({
                title: `${t('layout.ConfirmTransferOut')}`,
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const amount = formData.tokenType == '0' ? userInfo.value.USDT : userInfo.value.HF
                            if (amount < Number(formData.amount)) {
                                showToast((formData.tokenType == '0' ? t("layout.theBalanceUSDTIsOnly") : t("layout.theBalanceHFIsOnly")) + amount);
                                return;
                            }
                            await UserModule.verifyToken();
                            const res = await transfer(formData)
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` })
                                open.value = false
                                loadData()
                            } else {
                                showToast(res.data.message)
                            }
                        } catch (error) {
                            showToast(error)
                        }
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => { });
        };
        const loadData = async () => {
            pageLoading.value = true
            const res = await getUserInfo()
            userInfo.value = res.data.data.UserInfo || {}
            pageLoading.value = false
        }
        const timer = ref();
        watchEffect(() => {
            timer.value = setInterval(async () => {
                userInfo.value = (await getUserInfo()).data.data.UserInfo || {}
            }, 1500);
        });
        onUnmounted(() => {
            clearInterval(timer.value);
        });
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            loadData,
            pageLoading,
            loading,
            userInfo,
            formData,
            sendTransfer
        }
    }
})
</script>

<template>
    <div class="page">
        <div class="formData-bock">
            <van-tabs v-model:active="formData.tokenType">
                <van-tab title="USDT" name="0"></van-tab>
                <van-tab title="HF" name="1"></van-tab>
                <div class="form-box">
                    <van-field v-model="formData.address"
                        :placeholder="$t('layout.PleaseentertheotherpartySwalletaddress')" />
                    <van-field v-model="formData.amount" type="number"
                        :placeholder="$t('layout.Pleaseenterthetransferquantity')">
                        <template #right-icon>
                            <span>{{ formData.tokenType == '0' ? 'USDT' : 'HF' }}</span>
                        </template>
                    </van-field>
                    <div class="cell">
                        <div class="label">{{ $t('layout.AccountBalance') }}</div>
                        <div class="value">{{ formData.tokenType == '0' ? userInfo.USDT : userInfo.HF || 0 }} {{
                            formData.tokenType == '0' ? 'USDT' : 'HF' }}</div>
                    </div>
                </div>
            </van-tabs>
        </div>
        <van-button type="primary" @click="sendTransfer" :disabled="pageLoading || userInfo.Status == 1"
            :loading="loading">{{
                $t('layout.Confirmtransferout') }}</van-button>
        <div class="logs" @click="$refs.transfer.onRefresh()"><img src="@/assets/image/image6.png">{{
            $t('layout.Transferrecords') }}</div>
    </div>
    <get-transfer-list ref="transfer" />
</template>

<style lang="less" scoped>
.page {
    padding: 0 15px 15px 15px;

    .formData-bock {
        padding: 15px;
        background: rgba(11, 166, 98, 0.05);
        border-radius: 8px;
        border: 1px solid #FFFFFF;

        .van-tabs {
            overflow: hidden;

            &:deep(.van-tabs__wrap) {
                height: 45px;
                background: rgba(11, 166, 98, 0.1);
                border-radius: 8px;
                overflow: hidden;
                border: 1px solid #FFFFFF;

                .van-tabs__nav {
                    background: transparent;

                    .van-tab {
                        &.van-tab--active {
                            width: 172px;
                            height: 44px;
                            background: #0BA662;
                            border-radius: 8px;
                            color: #fff;
                        }
                    }

                    .van-tabs__line {
                        display: none;
                    }
                }
            }
        }

        .form-box {
            margin-top: 17px;

            .van-field {
                margin-bottom: 8px;
                height: 45px;
                padding: 0 15px;
                background: rgba(11, 166, 98, 0.05);
                border-radius: 8px;
                border: 1px solid #FFFFFF;

                &:deep(input) {
                    height: 45px;
                    font-size: 13px;
                    color: rgba(11, 166, 98, 1);
                }

                span {
                    font-weight: 500;
                    color: #0BA662;
                    font-size: 13px;
                }
            }

            .cell {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 45px;
                padding: 0 15px;
                font-size: 13px;
                background: rgba(11, 166, 98, 0.15);
                border-radius: 8px;
                border: 1px solid #FFFFFF;

                .value {
                    font-weight: 500;
                    color: #0BA662;
                }
            }
        }

    }

    .van-button {
        margin-top: 20px;
    }

    .logs {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: #0BA662;

        img {
            margin-right: 8px;
            height: 15px;
        }
    }

}
</style>
